<template>
    <div style="width: 70%;margin: 0 auto;background-color: #F5F5F5;">
        <el-container>
            <!--与el-container对应，否则会排版乱码-->
            <el-header style="height: 0;width: 0"></el-header>
            <!--页头-->
            <Header></Header>

            <div>
                <!--背景-->
                <div>
                    <img :src=backgroundImage style="width: 100%;height: 280px">
                </div>

                <!--用户信息-->
                <div class="headImage" style="position: absolute;left: 300px;top: 150px; display: flex">
                    <el-avatar :size="100" :fit=fit :src=user.userImage ></el-avatar>
                    <div>
                        <h3 style="margin: 15px">{{user.userName}}</h3>
                        <h5 style="margin: 15px">{{user.place}}</h5>
                    </div>

                    <div style="margin-left:300px ">
                        <h4><i class="el-icon-wallet"></i>  绿叶余额</h4>
                        <h1 style="font-size: xx-large">{{user.balance}} <i class="el-icon-coin"></i></h1>

                    </div>
                    <div style="margin-left: 100px">
                        <h3>
                            <el-button @click="addMoney" type="success" plain ><i class="el-icon-discount"></i>余额充值</el-button>
                        </h3>

                        <h3>
                            <el-button @click="loginOut"><i class="el-icon-sold-out"></i>退出登录</el-button>
                        </h3>

                    </div>
                </div>

                <div style="position: absolute;top: 300px;left: 740px" @click="submitshore">
                    <el-button  type="success"  icon="el-icon-plus" circle></el-button>
                </div>


            </div>

            <div style="background-color:#90EE90;">
                <el-tabs type="border-card" style="background-color: 	#F5F5F5;">
                    <el-tab-pane label="我发布的" @click="like">
                        <div v-for="(item,id) in myGoodsArr" :key="id" class="cart" >
                            <img :src="item.goodsImage" style="height: 60px;width: 60px">
                            <h4 class="number">({{id+1}})</h4>
                            <h4 >{{item.goodsName}}</h4>
                            <h5 >数量：{{item.goodsAmount}}</h5>
                            <h5 >单价：{{item.goodsPrice}}</h5>
                            <el-button style="height: 50px;position: absolute;left: 850px;top: 5px" @click="GoodsDelete(item.goodsId)">下架</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="我卖出的">
                        <div style="height: 200px">
                            <div class="cart" v-for="(item,id) in orderSellArr" :key="id" >
                                <img :src="item.goodsImage" style="height: 60px;width: 60px">
                                <h4 class="number">({{id+1}})</h4>
                                <h4>{{item.goodsName}}</h4>
                                <h5>总价：{{item.order1PriceSum}}</h5>
                                <h5>订单状态：{{orderState[item.order1State]}}</h5>
                                <el-button v-if="item.deleteVisible" style="height: 50px;position: absolute;left: 850px;top: 5px"
                                           @click="OrderSellDelete(item.order1Id)">删除订单</el-button>
                                <el-button v-if="item.goodsSendVisible" style="height: 50px;position: absolute;left: 850px;top: 5px"
                                           @click="sendGoods(item.order1Id)">发货</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="我买到的">
                        <div style="height: 200px">
                            <div class="cart" v-for="(item,id) in orderBuyArr" :key="id">
                                <img :src="item.goodsImage" style="height: 60px;width: 60px">
                                <h4 class="number">({{id+1}})</h4>
                                <h4>{{item.goodsName}}</h4>
                                <h5>总价：{{item.order1PriceSum}}</h5>
                                <h5>订单状态：{{orderState[item.order1State]}}</h5>
                                <el-button v-if="item.deleteVisible" style="height: 50px;position: absolute;left: 850px;top: 5px"
                                           @click="OrderBuyDelete(item.order1Id)">删除订单</el-button>
                                <el-button v-if="item.goodsReceivedVisible" style="height: 50px;position: absolute;left: 850px;top: 5px"
                                           @click="getGoods(item.order1Id)">收货</el-button>
                            </div>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="我的动态">
                        <div class="cart" v-for="(item,id) in posts" :key="id" >
                            <img :src="item.postImage" style="width: 60px;height: 60px">
                            <h4 class="number">({{id+1}})</h4>
                            <h4>{{item.postHead}}</h4>
                            <!--<h5>{{item.postContext}}</h5>-->
                            <el-button style="height: 50px;position: absolute;left: 850px;top: 5px" @click="postDelete(item.postid)">删除</el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <el-drawer
                    title="商品上架申请"
                    :visible.sync="drawer"
                    :direction="direction"
                    :before-close="handleClose">
                <span>
                    <div>
                        <el-input class="input11" v-model="submitGoods.name"></el-input>
                        <el-input class="input11" v-model="submitGoods.goodsType"></el-input>
                        <el-input class="input11" v-model="submitGoods.goodsAmount"></el-input>
                        <el-input class="input11" v-model="submitGoods.goodsPrice"></el-input>
                        <el-input class="input11" v-model="submitGoods.introduce"></el-input>
                        <el-button class="input11" @click="subGoods">发布</el-button>
                    </div>
                </span>
            </el-drawer>

            <el-drawer
                    title="余额充值"
                    :visible.sync="drawer2"
                    :direction="direction"
                    :before-close="handleClose">
                <span>
                    <div style="text-align: center">
                        <img :src="moneyImage" style="width: 200px;height: 300px;">
                        <div>
                            <el-button style="position: relative;top: 20px" @click="subMoney" >已充值</el-button>
                        </div>

                    </div>
                </span>
            </el-drawer>

            <!--页脚-->
            <Footer></Footer>
        </el-container>
    </div>


</template>

<script>
    import Footer from "../components/Footer";
    import Header from "../components/Header";
    export default {
        name: "User",
        components:{
            Footer,
            Header
        },

        data(){
            return{
                fit:'cover',
                direction: 'rtl',
                submitGoods:{
                  name:'名称',
                  introduce:'介绍',
                    goodsType:'类型',
                    goodsPrice:'单价',
                    goodsAmount:'数量',

                },
                drawer:false,
                drawer2:false,
                backgroundImage:require("../assets/bgc/12.jpg"),
                moneyImage:require("../assets/bgc/22.jpg"),
                activeName: 'second',
                logoImage: require("../assets/bgc/logo.png"),
                user:{
                    userName:'',
                    userImage:'',
                    balance:null,
                    place:'',
                },
                myGoodsArr:[

                ],
                myGoods:{
                    goodsId:1,
                    goodsName: "",
                    goodsPrice: 25,
                    goodsAmount: "1",
                    goodsAuthorId: 1,
                    goodsImage: "1.jpg",
                    goodsContent:'',
                },
                posts:[

                ],
                post:{
                    postid: 8,
                    postHead: "冰淇淋",
                    postContext: "我喜欢冰淇淋",
                    postClass: null,
                    postImage: null,
                    postVerify: null,
                    postLikes: null,
                    postAuthorid: "1",
                    goodsName:'',
                },
                orderSellArr:[

                ],

                orderState:[
                    "请加以","已下单未发货","已发货未收货","已收货,完成订单"
                ],

                orderSeller:{
                    order1Id: null,
                    order1HomeUserId: 1,
                    order1HomeAmount: 1,
                    order1PriceOne: 25,
                    order1PriceSum: 25,
                    order1BuyUserId: 1,
                    order1GoodsId: 1,
                    order1State: 1,
                    goodsName:'',
                    goodsImage:'',
                    deleteVisible:false,
                    goodsSendVisible:false,
                },
                orderBuyArr:[

                ],
                orderBuyer:{
                    order1Id: null,
                    order1HomeUserId: 1,
                    order1HomeAmount: 1,
                    order1PriceOne: 25,
                    order1PriceSum: 25,
                    order1BuyUserId: 1,
                    order1GoodsId: 1,
                    order1State: 1,
                    goodsName:'',
                    goodsImage:'',
                    deleteVisible:false,
                    goodsReceivedVisible:false,
                }

            }
        },


        methods: {
            submitshore(){
                this.drawer = true;
            },
            handleClose(done) {
                done()
            },
            addMoney(){
                this.drawer2 = true
            },

            handleClick(tab, event) {
                console.log(tab, event);
            },
            goHome(){
                this.$router.push("/");
            },
            like(){

            },
            subGoods(){
              this.$message("已提交，请耐心等待审核")
              this.drawer = false;
            },
            subMoney(){
                this.$message("已提交，请耐心等待审核")
                this.drawer2 = false;
            },

            loginOut(){
              if(localStorage.hasOwnProperty("userID")){
                  localStorage.removeItem("userID");
              }
              if (localStorage.hasOwnProperty("YiBanUserId")){
                  localStorage.removeItem("YiBanUserId")
                  this.$http({
                      url:'http://localhost:8083/user/loginOut'
                  }).then(res=>{
                      console.log(res)
                  }).catch(err=>{
                      console.log(err)
                  })
              }
                this.$router.push("/");
            },
///////////////////////////用户增删操作////////////////////////////////////////
            GoodsDelete(goodsId){

                this.$http({
                    url:'http://localhost:8083/goods/goodsDelete',
                    method:'POST',
                    params:{
                        "goodsId":goodsId,
                    }
                }).then(res=>{
                    console.log(res)
                    if(res.data.res){
                        this.$message(res.data.msg);
                    }else {
                        this.$message(res.data.msg);
                    }
                    window.location.reload();
                }).catch(err=>{
                    console.log(err)
                })
            },

            postDelete(postId){
                this.$http({
                    url:'http://localhost:8083/forum/deletePost',
                    method:'POST',
                    params:{
                        "postId":postId,
                    }
                }).then(res=>{
                    console.log(res)
                    if(res.data.res){
                        this.$message(res.data.msg);
                    }else {
                        this.$message(res.data.msg);
                    }
                    window.location.reload();
                }).catch(err=>{
                    console.log(err)
                })
            },

            OrderSellDelete(order1Id){
                this.$http({
                    url:'http://localhost:8083/goods/orderDelete',
                    method:'POST',
                    params:{
                        "order1Id":order1Id,
                    }
                }).then(res=>{
                    console.log(res)
                    if(res.data.res){
                        this.$message(res.data.msg);
                    }else {
                        this.$message(res.data.msg);
                    }
                    window.location.reload();
                }).catch(err=>{
                    console.log(err)
                })
            },

            sendGoods(order1Id){
                this.$http({
                    url:'http://localhost:8083/goods/stateChange',
                    method:'POST',
                    params:{
                        "orderID":order1Id,
                        "state":2,
                    }
                }).then(res=>{
                    console.log(res)
                    if (res.data.res){
                        this.$message(res.data.msg);
                    }else {
                        this.$message(res.data.msg);
                    }
                    window.location.reload();
                }).catch(err=>{
                    console.log(err)
                })
            },

            OrderBuyDelete(order1Id){
                this.$http({
                    url:'http://localhost:8083/goods/orderDelete',
                    method:'POST',
                    params:{
                        "order1Id":order1Id,
                    }
                }).then(res=>{
                    console.log(res)
                    if(res.data.res){
                        this.$message(res.data.msg);
                    }else {
                        this.$message(res.data.msg);
                    }
                    window.location.reload();
                }).catch(err=>{
                    console.log(err)
                })
            },

            getGoods(order1Id){
                this.$http({
                    url:'http://localhost:8083/goods/stateChange',
                    method:'POST',
                    params:{
                        "orderID":order1Id,
                        "state":3,
                    }
                }).then(res=>{
                    console.log(res)
                    if (res.data.res){
                        this.$message(res.data.msg);
                    }else {
                        this.$message(res.data.msg);
                    }
                    window.location.reload();
                }).catch(err=>{
                    console.log(err)
                })
            },

            /////////////////////////初始化获取数据/////////////////////////////////////
            getUser(){
                console.log("5555555555555555")
                this.$http({
                    method:'POST',
                    url:"http://localhost:8083/user/userDetail",
                    params:{
                        "userId":localStorage.getItem("userID"),
                    }
                }).then(res=>{
                    console.log(res);

                    this.user = res.data.user;
                    this.user.userImage = require("../assets/bgc/"+ res.data.user.userImage);
////////////////////////////////////////////////////////////////////////////////
                    for(let i in res.data.myGoods){
                        this.myGoods = res.data.myGoods[i];
                        this.myGoods.goodsImage = require("../assets/goodsImage/"+this.myGoods.goodsImage);
                        this.myGoodsArr.push(this.myGoods);
                    }
                        console.log(this.myGoodsArr)
/////////////////////////////////////////////////////////////////////////////////
                    for(let i in res.data.post){
                        this.post = res.data.post[i];
                        this.post.postImage = require("../assets/forumImage/"+this.post.postImage);
                        this.posts.push(this.post);
                    }
                        console.log(this.posts)
///////////////////////////////////////////////////////////////////////////////////////
                    for (let i in res.data.orderSeller){
                        this.orderSeller = res.data.orderSeller[i];
                        this.orderSeller.goodsImage = require("../assets/goodsImage/"+this.orderSeller.goodsImage)

                        if (this.orderSeller.order1State == 1){
                            this.orderSeller.deleteVisible = false;
                            this.orderSeller.goodsSendVisible = true;
                        }else if(this.orderSeller.order1State == 2){
                            this.orderSeller.deleteVisible = false;
                            this.orderSeller.goodsSendVisible = false;
                        }else {
                            this.orderSeller.deleteVisible = true;
                            this.orderSeller.goodsSendVisible = false;
                        }
                        this.orderSellArr.push(this.orderSeller);
                    }
                        console.log(this.orderSellArr)
////////////////////////////////////////////////////////////////////////////////////////////////////////
                    for (let i in res.data.orderBuyer){
                        this.orderBuyer = res.data.orderBuyer[i];
                        this.orderBuyer.goodsImage = require("../assets/goodsImage/"+this.orderBuyer.goodsImage)

                        if (this.orderBuyer.order1State == 1){
                            this.orderBuyer.deleteVisible = false;
                            this.orderBuyer.goodsReceivedVisible = false;
                        }else if(this.orderBuyer.order1State == 2){
                            this.orderBuyer.deleteVisible = false;
                            this.orderBuyer.goodsReceivedVisible = true;
                        }else {
                            this.orderBuyer.deleteVisible = true;
                            this.orderBuyer.goodsReceivedVisible = false;
                        }

                        this.orderBuyArr.push(this.orderBuyer)
                    }
                    console.log(this.orderBuyArr)
                }).catch(error=>{
                    console.log(error);
                })
            },

        },
///////////////////////////////钩子函数///////////////////////////////////
        created() {
            if(localStorage.hasOwnProperty("YiBanUserId")){
                localStorage.setItem("userID","1")
            }
            if(localStorage.hasOwnProperty("userID") ){
                console.log("user部分！！！");
                console.log(localStorage.getItem("userID"));
                this.getUser();
            }
        },

    }
</script>

<style scoped>
    .but{
        margin-top: 15px;
        margin-left: 15px;
        float: right;
    }
    .but button{
        width: 100px;
        height: 30px;
        border-radius: 5px;
        background-color: transparent;
        border: 0;
    }
    .cart{
        height: 60px;display: flex;
        border-radius: 5px;
        margin: 10px;
        background-color: #8FC0A9;
        position: relative;
    }
    .cart h4{
        margin-left: 100px;
    }
    .cart h5{
        margin-left: 100px;
    }
    .number{

    }
    .input11{
        margin: 20px;

    }
</style>